<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="G.DOXA">
	<meta name="description" content="G.DOXA">
	<title>My Project——G.DOXA | 项目协作工具缔造者</title>
	<link href="../css/main.css" rel="stylesheet" type="text/css">
	<link href="../css/common.css" rel="stylesheet" type="text/css">
	<link href="../css/reset.css" rel="stylesheet" type="text/css">
	<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<script src="../js/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
	<header class="header">
		<div class="top-nav">
			<a>Home</a>
			<ul>
				<li><a>project</a></li>
				<li><a>meeting minutes</a></li>
				<li><a>document</a></li>
				<li class="msg-nav">
					<a class="msg-nav-a">message<em>(1)</em></a>
					<div class="msg-box">
						<ul class="msg-tab">
							<li id="msgNew" class="active"><a href="#msg_list">New Message</a></li>
							<li id="msgCreat"><a href="#msg_new">Create Message</a></li>
						</ul>
						<section class="msg-list" id="msg_list"></section>
						<section class="msg-new" id="msg_new">
							<div class="msgTo">
							<form name="sendMsg" method="post" id="sendMsg">
								<div class="msgTo-row">
									<p>
										<span  class="msgTo-label">To:</span>
										<span class="msgTo-input"><input type="text" name="accepter" id="accepter"/></span>
									</p>
									<a class="addContacts"></a>
								</div>
								<div class="msgTo-cont">
									<textarea name="content" maxlength="100" placeholder="Pls input!"></textarea>
									<input type="submit" name="Submit" value="Send" class="sendTo"/>
								</div>
							</form>
							</div>
						</section>
					</div>
				</li>
				<li><a>team</a></li>
				<li><a>profile</a></li>
			</ul>
		</div>
	</header>
	<div class="top-bar">
		<ul id="myTab" class="nav nav-tabs">
			<li class="active"><a href="#project_home" data-toggle="tab">My project</a></li>
			<li><a href="#project_new" data-toggle="tab" id="create_project">New</a></li>
		</ul>
		<!-- <p>my project</p>
		<p><a class="new-project" id="create_project">new</a></p> -->
		<p class="project-search"><input placeholder="search" name="search" /></p>
	</div>
    <div class="main-content tab-content" id="myTabContent" >
		<!--Project List-->
		<div class="tab-pane fade in active clearfix" id="project_home">
			<div class="project-list-box">
				<div class="item-choose">
					<div class="status-choose">
						<p>project status</p>
						<p class="radio_list"><input type="radio" class="status-radio" name="status" value="Completed" /><label>green</label></p>
						<p class="radio_list"><input type="radio" class="status-radio" name="status" value="Approved" /><label>yellow</label></p>
						<p class="radio_list"><input type="radio" class="status-radio" name="status" value="Pending" /><label>red</label></p>
					</div>
					<div class="select-choose">
					</div>
				</div>
				<div class="project-list clearfix">
					
				</div>
			</div>
			<div class="meeting-minutes">
				<ul class="meetingM-tab">
					<li><a>meeting minutes</a></li>
				</ul>
				<section class="meetingM-tab-section">
					<p class="reminder">Click "Meeting Minutes" check!</p>
				</section>
			</div>
		</div>
		<!--New Project-->
		<div class="tab-pane fade" id="project_new">
			<div class="newProject-box">
				<div class="newProject-msg">
					<ul>
						<form name="newProject" method="post" id="proForm">
						<li>
							<label>Project Name</label>
							<p><input id="newProject_ProjectName" type="text" name="projectName"/></P>
						</li>
						<li>
							<label>Project Description</label>
							<p><textarea id="newProject_ProjectDescription" maxlength="250" name="projectDescription"></textarea></P>
						</li>
						<li>
							<label>Client Name</label>
							<p><input id="newProject_ClientName" class="commoninput" type="text" name="clientName"/></P>
						</li>
						<li>
							<label>Client Contact</label>
							<p><input id="newProject_ClientContact" class="commoninput" type="text" name="clientContact"/></P>
						</li>
						<li>
							<label>Client Email</label>
							<p><input id="newProject_ClientEmail" class="commoninput" type="text" name="clientEmail"/></P>
						</li>
						<li>
							<label>Client Mobile</label>
							<p><input id="newProject_ClientMobile" class="commoninput" type="text" name="clientMobile"/></P>
						</li>
						<li>
							<label>Industry</label>
							<p>
								<select name="Industry" id="newProject_Industry">
									<option value="Food">Food</option>
									<option value="Building">Building</option>
									<option value="AD">AD</option>
									<option value="Economic">Economic</option>
								</select>
							</P>
						</li>
						<li>
							<label>Region</label>
							<p>
								<select name="Region" id="newProject_Region">
									<option value="Shanghai">Shanghai</option>
									<option value="Beijing">Beijing</option>
									<option value="Shenzheng">Shenzheng</option>
									<option value="Jiangsu">Jiangsu</option>
								</select>
							</P>
						</li>
						<li class="newProject-StartDate">
							<label>Start Date</label>
							<p class="input-group date" id="datetimepicker1" data-date="" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
								<input type='text' name="startDate" class="form-control" readonly="true"/>  
								<span class="input-group-addon">  
									<span class="glyphicon glyphicon-calendar"></span>  
								</span>  
							</p>
						</li>
						<li>
							<label>Project Owner</label>
							<p>
								<select name="ProjectOwner" id="newProject_ProjectOwner">
									<option value="Micah">Micah</option>
									<option value="Leo">Leo</option>
									<option value="Chanel">Chanel</option>
								</select>
							</P>
						</li>
						<li>
							<label>Project Manager</label>
							<p>
								<select name="ProjectManager" id="newProject_ProjectMgr">
									<option value="Nike">Nike</option>
									<option value="laur">laur</option>
									<option value="Dior">Dior</option>
								</select>
							</P>
						</li>
						<li>
							<label for="id_select">Project Members</label>
							<p>
								<select name="ProjectMembers" id="id_select" class="selectpicker" multiple data-live-search="true">
									<option value="number01">number01</option>
									<option value="number02">number02</option>
									<option value="number03">number03</option>
									<option value="number04">number04</option>
									<option value="number05">number05</option>
									<option value="number06">number06</option>
								</select>
							</P>
						</li>
						
						<li class="newProject-submit">
							<input id="newProject_Submit" type="button" name="Submit" value="Submit"/>
						</li>
						</form>
					</ul>
				</div>
				<div class="newProject-help">
					<p class="help-mark">Help</p>
					<section>
						<p>Project Name: A name to define a project. Suggest to include a location and service.</p>
						<p>Project Description: The detail information of a project.</p> 
						<p>Client Name: Name of the client. Normally refer to the entity who pay.</p>
						<p>Client Contact: The representative from the client side. </p>
						<p>Email/Mobile: Contact info</p>
						<p>Industry: the industry the client is in. If no suitable industry is available, choose "General". </p>
					</section>
				</div>
		</div>
		</div>
	</div>

<script src="../js/common.js" type="text/javascript"></script>
<script src="../js/main.js" type="text/javascript"></script>
<script src="../js/myProject.js" type="text/javascript"></script>
<script src="../js/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../src/mock.js" type="text/javascript"></script>
<script src="../src/mock-main.js" type="text/javascript"></script>
<script src="../src/mock-project.js" type="text/javascript"></script>
<script src="../src/mock-common.js" type="text/javascript"></script>
<link href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />  
<script src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<link href="../js/bootstrap/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
<script src="../js/bootstrap/js/bootstrap-select.min.js" type="text/javascript"></script>
<script>
$(function () {  
	 $('#datetimepicker1').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0
    });    
	$('.selectpicker').selectpicker({
		'selectedText': 'cat'
	});
});  
</script>
</body>
</html>